<link rel="stylesheet" href="../source/css/controls.css" />

<style>
body {
  overflow: hidden;
}
.scroll-row-style {
  overflow: hidden;
  width: 99%;
  background-color: #8bd;
  border: 6px solid #999;
  position: relative;
}
.scroll-div-style {
  margin: 5px;
}
.scroll-items-div-style {
}
.scroll-item-style {
  background-color: #58b;
  border-radius: 10px;
  color: #ddd;
  padding: 10px;
  font-family: sans-serif;
  font-size: 20pt;
  border: #58b solid 6px;
}
.item-hover {
  border: #dd0 solid 6px !important;
}
.photo {
  position: absolute;
  left: 0;
  top: 0;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="../source/js/scrollrow.js"></script>
<script type="text/javascript" src="../source/js/gtvcore.js"></script>
<script type="text/javascript" src="../source/js/keycontrol.js"></script>

<script type="text/javascript">
/**
 * Creates the content for the page and adds it to the specified parent
 * element. This page has a set of thumbnails displayed in a single row
 * control.
 * @param {jQuery.Element} topParent The parent element for the page contents.
 */
function makePage(topParent) {
  var FEED_URL = 'http://picasaweb.google.com/data/feed/base/featured?' +
                 'alt=json-in-script&kind=photo&access=public&' +
                 'slabel=featured&hl=en_US&max-results=25';

  function makeItem(entry) {
    var thumb = entry.media$group.media$thumbnail[0].url;
    if (!thumb) {
      return null;
    }

    var item = $('<img></img>');
    item.css({
      height: '150px',
      display: 'block'
    })
    item.attr('src', thumb);

    var content = entry.media$group.media$content[0].url;
    item.data('url', content);

    return item;
  }

  var rowControl;
  function makeRow(items) {
    function choiceCallback(item) {
      // the img we created was placed inside a container
      // by Row Control
      var image = item.children().first();
      var url = image.data('url');

      photo.attr('src', url);
    }

    var keyController = new gtv.jq.KeyController();
    keyController.start();

    var photo = $('<img></img>')
      .addClass('photo')
      .css('height', $(window).height());
    topParent.append(photo);

    var styles = {
      row: 'scroll-row-style',
      itemsDiv: 'scroll-items-div-style',
      itemDiv: 'scroll-div-style',
      item: 'scroll-item-style',
      hover: 'item-hover'
    };

    rowControl = new gtv.jq.RowControl({
      containerId: 'row-container',
      styles: styles,
      keyController: keyController,
      choiceCallback: choiceCallback
    });

    rowControl.showControl({
      topParent: topParent,
      contents: {
        items: items
      }
    });

    rowControl.enableNavigation(keyController);
  }

  gtv.jq.GtvCore.processJsonpFeed(
    FEED_URL,
    makeItem,
    makeRow,
    ['feed','entry']);
};

/**
 * jQuery callback made when the page has been loaded and is ready.
 */
$(document).ready(function() {
    makePage($("body"));
  });
</script>
